<template>
  <div class="google temp-root-div">
    <div class="main">
      <div class="box flex">
        <div class="midd-main">
          <div class="midd-list">
            <div class="midd-wrap">
              <div>
                <h2>{{$t('googlebind_tit')}}</h2>
              </div>
              <div class="midd-box">
                <div>
                  <h2>{{$t('googlebind_first')}}</h2>
                  <br>
                  <p>{{$t('googlebind_first_tip1')}}
                    <br>{{$t('googlebind_first_tip2')}}
                  </p>
                </div>
                <div class="box-img">
                  <el-button type="info">App Store</el-button>
                  <el-button type="info">Google Play</el-button>
                </div>
              </div>

              <div class="midd-box" style="height: 300px">
                <div>
                  <h2>{{$t('googlebind_second')}}</h2>
                  <br>
                  <p>{{$t('googlebind_second_tip1')}}
                    <br>{{$t('googlebind_second_tip2')}}
                  </p>
                </div>
                <div class="box-img">
                  <div>
                    <ul class="clearfix" style="padding-top:10px">
                      <div id="qrcode" ></div>
                    </ul>
                  </div>
                  <div class="img-to">
                    <h3>{{$t('googlebind_key')}}:{{google_key}}
                      <span>
                        <el-button type="text" v-clipboard:copy="google_key" v-clipboard:success="onCopy" v-clipboard:error="onError">{{$t('googlebind_copy')}}</el-button>
                      </span>
                    </h3>
                  </div>
                </div>
              </div>

              <div class="midd-box">
                <div>
                  <h2>{{$t('googlebind_third')}}</h2>
                  <br>
                </div>
                <div>
                  <el-input v-model="google_code" style="width: 340px" :placeholder="$t('googlebind_code')"></el-input>
                </div>
              </div>
              <div class="midd-text">
                <el-button style="width: 340px" type="primary" @click="bindGoogleCode()" >{{$t('googlebind_bind')}}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueClipboard from 'vue-clipboard2';
import Vue from 'vue';
Vue.use(VueClipboard);
import QRCode from "qrcodejs2";
export default {
  name: "googlebind",
  components: {

  },
  data() {
    return {
      google_key: '',
      google_qrcode:'',
      google_pic: '',
      google_code:'',
    };
  },
  created(){
    this.getUserGoogleCode();
  },
  methods: {
    qrcode() {
      let username =this.getUserName();
      this.google_qrcode='otpauth://totp/'+username+'?secret='+ this.google_key+'&issuer=www.superid.in';
      let qrcode = new QRCode("qrcode", {
        width: 100,
        height: 100, // 高度
        text: this.google_qrcode,// 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: '#f0f',
        foreground: '#ff0'
      });
      document.getElementById('qrcode').title='';
    },
    // 绑定谷歌码
    bindGoogleCode(){
      if (this.google_code==''){
        return this.$message(this.$t('googlebind_code'));
      }
      this.axios
        .post("this.GOOGLE" ,
        {
          code:this.google_code
        })
        .then(res => {
          if (res.data.status == "success") {
            this.$router.push({name:'google'});
          } else {
            return this.$message(res.data.msg);
          }
        })
        .catch(res => {
          return this.$message(res.data.msg);
        });

    },
    // 取用户谷歌码
    getUserGoogleCode(){
      this.axios
        .get(this.GOOGLE)
        .then(res => {
          if (res.data.status == "success") {
            this.$router.push({name:'google'});
          } else {
            this.google_key = res.data.data.google_code;
          }
          if (this.google_key!=''){
            this.qrcode();
          }
        })
        .catch(res => {
          return this.$message(res.data.msg);
        });
    },
    alertMsg(title, context) {
      this.$alert(context, title, {
        confirmButtonText: this.$t('btn_submit')
      });
    },
    onCopy(e){
      return this.alertMsg(this.$t('googlebind_success'), this.$t('googlebind_copy_success')+":"+e.text);
    },
    onError(e){
      return this.alertMsg(this.$t('googlebind_fail'), this.$t('googlebind_copy_fail'));
    },
  }
};
</script>

<style scoped lang="scss">
.acc {
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1000px;
  .box {
    height: 100%;
  }
}
.main {
  position: relative;
  flex: 1 1 100%;
  height: 100%;
  margin-top: 20px;
  .midd-main {
    flex: 1 1 auto;
    width: 100%;
    background: #fff;
    text-align: left;
    h1 {
      color: #999999;
      font-size: 18px;
      padding-left: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #efefef;
    }
    .midd-wrap {
      h2 {
        color: #333;
        font-size: 18px;
      }
      .midd-box {
        width: 920px;
        border: 1px solid #d8d8de;
        padding: 30px;
        margin-top: 20px;
        p {
          color: #a0a0a0;
          font-size: 14px;
        }
        .box-img {
          padding-top: 50px;
          margin-bottom: -10px;

          .img-to {
            margin-left: 180px;
            margin-top: -100px;
          }
        }
      }
      .midd-text {
        margin-top: 59px;
        padding-left: 260px;

        .midd-list {
          line-height: 35px;
          width: 320px;
          padding-bottom: 10px;
          span {
            color: #999;
            font-size: 14px;
            display: inline-block;
            width: 70px;
            text-align: right;
          }
          h3 {
            display: inline-block;
            color: #333;
            font-size: 14px;
            margin-left: 50px;
          }
        }
      }
    }
  }
}
</style>
